<template>
  <el-row :gutter="40">
    <el-col :lg="24">
      <el-form :inline="true" :model="queryParams" class="filter-form-inline" label-position="right" size="small">
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :lg="6" :xs="8">
            <el-form-item label="关键字" style="width: 100%">
              <el-input v-model="queryParams.keyWord" clearable placeholder="输入名称、编号" />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="8">
            <el-form-item style="width: 100%">
              <el-button class="border-btn" @click="handlReset">重置</el-button>
              <el-button class="main-btn" type="primary" @click="handlSearch">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
  </el-row>
  <table-view :cell-style="cellStyle" :data="tableData" border header-cell-class-name="table-header" size="medium"
    @sort-change="handlSort" @row-click="aloneClick">
    <el-table-column :show-overflow-tooltip="true" align="center" label="人员编号" prop="agentNumber" />
    <el-table-column :show-overflow-tooltip="true" align="center" label="姓名" prop="userName" />
     <el-table-column prop="address" label="详细地址" align="center" :show-overflow-tooltip="true" />
    <el-table-column :show-overflow-tooltip="true" align="center" label="联系电话" prop="tel" />
    <el-table-column :show-overflow-tooltip="true" align="center" label="创建时间" prop="createdAt" sortable="custom">
      <template #default="{row}">
        {{ dateFormat("yyyy-mm-dd HH:MM:SS", row.createdAt) }}
      </template>
    </el-table-column>
    <el-table-column :show-overflow-tooltip="true" align="center" label="兼职状态">
      <template #default="{row}">
        {{ getLabel('confirmStatus', row.confirmStatus) }}
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作">
      <template #default="{row}">
        <el-button v-auth="{v:['crm:marketing:cooperationInformation:partTimeBigBag:change'],bool:row.confirmStatus === '0'}" type="text"
          @click="handlEdit(row.id,1)">
          变更信息
        </el-button>
        <!-- <el-button v-auth="{v:['crm:marketing:cooperationInformation:partTimeBigBag:delete'],
           bool:row.agentStatus === '-1' || row.agentStatus === '-5'}" type="text" @click="handlDelete(row.id)">
          删除
        </el-button>

        <template v-if="Number(row?.agentStatus) > 1  ">
          <template
              v-if="row.flowStatus !== 'DOING' || row.flowStatus === 'REPEAL' || row.flowStatus === 'REJECT_INITIATOR'">
            <el-button v-auth="{v:['crm:marketing:cooperationInformation:partTimeBigBag:change']}" type="text"
                       @click="handlEdit(row.id,1)">
              变更信息
            </el-button>
          </template>
        </template>

        <template v-else>
          <el-button v-auth="{v:['crm:marketing:cooperationInformation:partTimeBigBag:change'],
          bool:row?.agentStatus === '-1' ||  row?.agentStatus === '-6' }" type="text" @click="handlEdit(row.id,2)">
            编辑
          </el-button>
        </template> -->

      </template>
    </el-table-column>
  </table-view>
  <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.page" :total="total"
    style="display: flex; justify-content: flex-end" @pagination="handlList" />
  <!--新建潜在代理商 -->
  <formPersonnel ref="formPersonnelRef" agent-type="agent_person" @succsess="succsess" />
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRouter } from "vue-router";
import { crmStore } from "@CRM/store";

export default {
  name: "Potential",
  components: {
    formPersonnel: defineAsyncComponent(() =>
      import("../modules/partTimeBigBag/formPersonnel.vue")
    ),
  },
  setup() {
    const api = inject("api");
    const router = useRouter();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      queryParams: {
        keyWord: "",
        pageSize: 20,
        page: 1,
        agentType: "agent_person",
        from: "2",
        tradeStatus: "1",
      },
      date: [],
      tableData: [],
      agentStatusData:
        crmStore.getters["dictionary/getDictionary"]["agent_status_person"],
      agentPersonLevel:
        crmStore.getters["dictionary/getDictionary"]["agent_person_level"],
      total: 0,
      formPersonnelRef: null,
      visible: false,
    });

    const handlNew = () => {
      data.formPersonnelRef.open(null, 1);
    };

    const handlEdit = (id, num) => {
      data.formPersonnelRef.open(id, 2, num);
    };

    const handlDelete = (id) => {
      currentInstance.proxy
        .alertBox({ message: "删除数据后不可恢复,确定删除？" })
        .then(() => {
          api.channelAgent.POTENTIALAGENT_DELETE_LIST(id).then((res) => {
            if (res.code === 0) {
              currentInstance.proxy.customMessage({
                type: "success",
                message: "删除成功",
              });
              handlList();
            } else {
              currentInstance.proxy.customMessage({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    // 获取列表
    const handlList = () => {
      api.channelAgent.POTENTIALAGENT_LIST(data.queryParams).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || [];
          data.total = res.data.total;
        }
      });
    };

    const handlReset = () => {
      data.queryParams = {
        keyWord: "",
        pageSize: 20,
        page: 1,
        agentType: "agent_person",
        from: "2",
        tradeStatus: "1",
      };
      handlList();
    };

    const handlSearch = () => {
      data.queryParams.page = 1;
      handlList();
    };

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === "操作" || column.label === "查看文件") return;
      router.push({
        path: "/marketing/cooperationInformation/partTimeBigBag/potential",
        query: { id: row.id },
      });
    };

    // 鼠标样式
    const cellStyle = () => {
      return "cursor:pointer;";
    };

    const succsess = () => {
      handlList();
    };

    // 排序
    const handlSort = (row) => {
      if (row.column) {
        if (row.column.label === "创建时间") {
          switch (row.order) {
            case "ascending":
              data.queryParams.createdSort = "asc";
              break;
            case "descending":
              data.queryParams.createdSort = "desc";
              break;
          }
        }
      }
      handlList();
    };

    onMounted(() => {
      handlList();
    });

    return {
      ...toRefs(data),
      handlNew,
      handlEdit,
      handlList,
      handlReset,
      handlSearch,
      aloneClick,
      cellStyle,
      handlDelete,
      succsess,
      handlSort,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
